import { isHttps } from '@/utils/utils';
import { Image } from 'antd';

interface ConflictViewProps {
  currentData: AbnormalOrderTableItem;
  composeImageUrl: string;
  conflictOrder: ConflictOrderParams;
}

const ConflictView = (props: ConflictViewProps) => {
  const { currentData, composeImageUrl, conflictOrder } = props;
  const lastImageUrl = conflictOrder?.lastPatrolInfo?.imageUrl || '';
  return (
    <>
      {composeImageUrl && (
        <div style={{ textAlign: 'center', color: 'red', fontSize: 18 }}>
          <strong>
            当前巡检路段为：{currentData.parkingLotName}，泊位：{currentData.spotId}，车牌号：
            {currentData.plateNumber}
          </strong>
          <div
            style={{
              background: 'black',
              border: '1px solid #FFF',
              margin: '0 auto',
            }}
          >
            <Image
              alt="巡检图片"
              style={{ maxHeight: 440 }}
              src={isHttps ? composeImageUrl : composeImageUrl.replace('http://', 'https://')}
            />
          </div>
        </div>
      )}
      {conflictOrder && (
        <div style={{ textAlign: 'center', color: 'red', fontSize: 18 }}>
          <strong>
            冲突订单路段为：{conflictOrder.parkingLotName}，泊位：{conflictOrder.spotId}，车牌号：
            {conflictOrder.plateNumber}
          </strong>
          <div
            style={{
              background: 'black',
              border: '1px solid #FFF',
              margin: '0 auto',
            }}
          >
            {lastImageUrl ? (
              <Image
                alt="巡检图片"
                style={{ maxHeight: 440 }}
                src={isHttps ? lastImageUrl : lastImageUrl.replace('http://', 'https://')}
              />
            ) : (
              '暂无图片'
            )}
          </div>
        </div>
      )}
    </>
  );
};

export default ConflictView;
